{% extends 'base.html' %}
{% load static %}

{% block title %}审批借用申请 - {{ borrow.asset.name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-user-check me-2"></i>审批借用申请</h5>
                </div>
                
                <div class="card-body">
                    <!-- 申请概要 -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title"><i class="fas fa-laptop me-2"></i>资产信息</h6>
                                    <p class="card-text">
                                        <strong>{{ borrow.asset.name }}</strong><br>
                                        <small class="text-muted">{{ borrow.asset.asset_number }} | {{ borrow.asset.category.name }}</small>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title"><i class="fas fa-user me-2"></i>申请人信息</h6>
                                    <p class="card-text">
                                        <strong>{{ borrow.borrower.get_full_name|default:borrow.borrower.username }}</strong><br>
                                        <small class="text-muted">{{ borrow.borrower_department.name|default:"未分配部门" }}</small>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 借用详情 -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0">借用详情</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td width="120"><strong>借用目的：</strong></td>
                                            <td><span class="badge bg-info">{{ borrow.get_purpose_display }}</span></td>
                                        </tr>
                                        <tr>
                                            <td><strong>申请时间：</strong></td>
                                            <td>{{ borrow.created_at|date:"Y-m-d H:i" }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>预计归还：</strong></td>
                                            <td>{{ borrow.expected_return_date|date:"Y-m-d H:i" }}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td width="120"><strong>联系电话：</strong></td>
                                            <td>{{ borrow.contact_phone|default:"未提供" }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>联系邮箱：</strong></td>
                                            <td>{{ borrow.contact_email|default:"未提供" }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>借用时长：</strong></td>
                                            <td>
                                                {% with days_diff=borrow.expected_return_date|timeuntil %}
                                                    {{ days_diff }}
                                                {% endwith %}
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            
                            <div class="mt-3">
                                <strong>详细说明：</strong>
                                <div class="border rounded p-3 mt-2 bg-light">
                                    {{ borrow.purpose_description }}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 审批表单 -->
                    <form method="post" id="approvalForm">
                        {% csrf_token %}
                        
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">审批意见</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="form-label">审批决定 <span class="text-danger">*</span></label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="action" 
                                                       id="approve" value="approve" required>
                                                <label class="form-check-label text-success" for="approve">
                                                    <i class="fas fa-check me-1"></i><strong>批准借用</strong>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="action" 
                                                       id="reject" value="reject" required>
                                                <label class="form-check-label text-danger" for="reject">
                                                    <i class="fas fa-times me-1"></i><strong>拒绝借用</strong>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="notes" class="form-label">审批备注</label>
                                    <textarea class="form-control" id="notes" name="notes" rows="4" 
                                              placeholder="请输入审批意见或备注信息..."></textarea>
                                    <div class="form-text">
                                        <small>建议填写审批理由，特别是拒绝时请说明原因</small>
                                    </div>
                                </div>
                                
                                <!-- 审批提醒 -->
                                <div class="alert alert-info">
                                    <h6><i class="fas fa-info-circle me-2"></i>审批须知</h6>
                                    <ul class="mb-0">
                                        <li><strong>批准：</strong>资产将可以办理借出手续，请确认申请人有借用资格</li>
                                        <li><strong>拒绝：</strong>申请将被拒绝，申请人可查看拒绝原因</li>
                                        <li>审批后的决定将记录在系统中，请谨慎操作</li>
                                        <li>如有疑问，建议先与申请人沟通确认</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="d-flex justify-content-between mt-4">
                            <a href="{% url 'assets:borrow_request_detail' borrow.pk %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>返回详情
                            </a>
                            <div>
                                <button type="button" class="btn btn-outline-danger me-2" onclick="history.back()">
                                    <i class="fas fa-times me-1"></i>取消
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-check me-1"></i>提交审批
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('approvalForm');
    const notesField = document.getElementById('notes');
    
    // 监听审批决定变化
    document.querySelectorAll('input[name="action"]').forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.value === 'reject') {
                notesField.required = true;
                notesField.placeholder = '拒绝借用时必须填写拒绝原因...';
                notesField.parentElement.querySelector('.form-text').innerHTML = 
                    '<small class="text-danger">拒绝时必须填写拒绝原因</small>';
            } else {
                notesField.required = false;
                notesField.placeholder = '请输入审批意见或备注信息...';
                notesField.parentElement.querySelector('.form-text').innerHTML = 
                    '<small>建议填写审批理由，特别是拒绝时请说明原因</small>';
            }
        });
    });
    
    // 表单提交验证
    form.addEventListener('submit', function(e) {
        const selectedAction = document.querySelector('input[name="action"]:checked');
        const notes = notesField.value.trim();
        
        if (!selectedAction) {
            e.preventDefault();
            alert('请选择审批决定');
            return false;
        }
        
        if (selectedAction.value === 'reject' && !notes) {
            e.preventDefault();
            alert('拒绝借用时必须填写拒绝原因');
            notesField.focus();
            return false;
        }
        
        // 确认提交
        const actionText = selectedAction.value === 'approve' ? '批准' : '拒绝';
        const confirmMessage = `确定要${actionText}这个借用申请吗？`;
        
        if (!confirm(confirmMessage)) {
            e.preventDefault();
            return false;
        }
    });
});
</script>
{% endblock %}
